<template>
  <div class="head-container">
    <el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入仪器设备名称">
      <template #prefix>
        <Icon icon="ep:search" />
      </template>
    </el-input>
  </div>
  <div class="head-container">
    <el-tree
      ref="treeRef"
      :data="deptList"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      :props="defaultProps"
      :default-expand-all="false"
      highlight-current
      node-key="id"
      @node-contextmenu="handleRightClick"
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script lang="ts" setup>
import { ElTree } from 'element-plus'
// import { LyntglBuildingVO, LyntglBuildingApi } from '@/api/system/lyntglbuilding'
import { defaultProps } from '@/utils/tree'
import { ref, watch, onMounted } from 'vue'

defineOptions({ name: 'TreeIndex' })

const deptName = ref('')

// 定义设备选项
const deptList = ref([
  {
    id: 1,
    value: 'zhljy',
    name: '综合录井仪型号',
    children: [
      { id: 101, value: 'sk2000', name: 'SK2000', parentId: 1 },
      { id: 102, value: 'skq', name: 'SKQ', parentId: 1 },
      { id: 103, value: 'skc', name: 'SKC', parentId: 1 },
      { id: 104, value: 'sk_cms', name: 'SK-CMS', parentId: 1 },
      { id: 105, value: 'sk_2000fc', name: 'SK-2000FC', parentId: 1 },
      { id: 106, value: 'dql', name: 'DQL', parentId: 1 },
      { id: 107, value: 'cms', name: 'CMS', parentId: 1 },
      { id: 108, value: 'smart', name: 'SMART', parentId: 1 },
      { id: 109, value: 'dqdc_fc', name: 'DQDC-FC', parentId: 1 },
      { id: 110, value: 'dql_d', name: 'DQL-D', parentId: 1 },
      { id: 111, value: 'dml', name: 'dml', parentId: 1 },
      { id: 112, value: 'sf_3000', name: 'SF-3000', parentId: 1 },
      { id: 113, value: 'wellstar', name: 'WELLSTAR', parentId: 1 },
    ],
  },
  {
    id: 2,
    value: 'zjcsy',
    name: '钻井参数仪型号',
    children: [],
  },
  {
    id: 3,
    value: 'szcl_lwd',
    name: '随钻测量LWD型号',
    children: [
      { id: 301, value: 'bench_tree', name: 'Bench Tree', parentId: 3 },
      { id: 302, value: 'hlbd', name: '哈里伯顿', parentId: 3 },
      { id: 303, value: 'sl', name: '斯伦', parentId: 3 },
      { id: 304, value: 'bs', name: '贝谢', parentId: 3 },
      { id: 305, value: 'szdx', name: '旋转导向', parentId: 3 },
      { id: 306, value: 'bkxssb', name: '贝克休斯设备', parentId: 3 },
    ],
  },
  {
    id: 4,
    value: 'szcl_mwd',
    name: '随钻测量MWD型号',
    children: [
      { id: 401, value: 'hlbd', name: '哈里伯顿', parentId: 4 },
      { id: 402, value: 'bench_tree', name: '海蓝', parentId: 4 },
      { id: 403, value: '6h', name: '六合', parentId: 4 },
      { id: 404, value: 'art', name: '奥瑞拓', parentId: 4 },
    ],
  },
  {
    id: 5,
    value: 'jxyly',
    name: '井下压裂仪型号',
    children: [
      { id: 501, value: 'sj2000', name: '四机2000', parentId: 5 },
      { id: 502, value: '2s2000', name: '双S2000', parentId: 5 },
      { id: 503, value: 'jereh2000', name: 'Jereh2000', parentId: 5 },
      { id: 504, value: 'jereh2500', name: 'Jereh2500', parentId: 5 },
      { id: 505, value: 'nov2500', name: 'NOV2500', parentId: 5 },
      { id: 506, value: 'bs2500', name: '宝石2500', parentId: 5 },
    ],
  },
  {
    id: 6,
    value: 'gjyq',
    name: '固井仪器型号',
    children: [
      { id: 601, value: 'gjc44_21', name: 'GJC44-21', parentId: 6 },
      { id: 602, value: 'gjc55_28', name: 'GJC55-28', parentId: 6 },
      { id: 603, value: 'gjc75_30', name: 'GJC75-30', parentId: 6 },
      { id: 604, value: 'gjc85_28', name: 'GJC85-28', parentId: 6 },
      { id: 605, value: 'gjc100_30', name: 'GJC100-30', parentId: 6 },
    ],
  },
  {
    id: 7,
    value: 'syyq',
    name: '试油仪器型号',
    children: [
      { id: 701, value: 'expro', name: 'EXPRO', parentId: 7 },
      { id: 702, value: 'bp', name: '博普', parentId: 7 },
      { id: 703, value: 'ses', name: '赛恩斯', parentId: 7 },
    ],
  },
  {
    id: 8,
    value: 'dhyq',
    name: '地化仪器型号',
    children: [],
  },
]);


const treeRef = ref<InstanceType<typeof ElTree>>()

/** 获得部门树 */
// const getTree = async () => {
//   const res = await LyntglBuildingApi.getTreeData()
//   let index = 0;
// while (index < res.length) {
//   if (res[index].level === 2) {
//     res.splice(index, 1);
//   } else {
//     index++;
//   }
// }
//   console.log(res,'--')

//   deptList.value = []
//   deptList.value.push(...handleTree3(res))
// }

/** 基于名字过滤 */
const filterNode = (name: string, data: Tree) => {
  if (!name) return true
  return data.name.includes(name)
}

/** 处理部门被点击 */
const handleNodeClick = async (row: { [key: string]: any }) => {
  emits('node-click', row)
}

/** 处理部门被点击 */
const handleRightClick = async (row: { [key: string]: any }, node: Node) => {
  emits('node-contextmenu', row, node)
}
const emits = defineEmits(['node-click', 'node-contextmenu'])

/** 监听deptName */
watch(deptName, (val) => {
  treeRef.value!.filter(val)
})

/** 初始化 */
onMounted(async () => {
  // await getTree()
})
</script>
